<template>
    <view class="cart">
    <!-- 列表 -->
    <view class="cart-list">
      <view 
        class="cart-item"
        v-for="(item,index) in cartList"
        :key="item.goods_id"
      >
        <!-- 复选框 -->
        <view class="cart-chk">
          <checkbox-group @change="onGoodsCheck(index)">
            <checkbox :checked="item.checked"></checkbox>
          </checkbox-group>
        </view>
        <!-- 商品图片 -->
        <view class="cart-img">
          <image
            mode="widthFix"
            :src="item.goods_small_logo"
          ></image>
        </view>
        <!-- 商品详情 -->
        <view class="cart-detail">
          <view class="cart-goods-name u-line-2">{{item.goods_name}}</view>
          <view class="cart-goods-info">
            <view class="goods-price">￥{{item.goods_price}}</view>
            <view class="goods-num-tool">
              <!-- <u-number-box
                v-model="value"
                @change="valChange"
              ></u-number-box> -->
              <!-- 切换其他的实现方式！！！  -->
              <view class="num-change" @click="onNumChange(-1,index)">-</view>
              <view class="num-value">{{item.nums}}</view>
              <view class="num-change" @click="onNumChange(+1,index)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="cart-tool">
      <!-- 全选 -->
      <view class="all-checkbox">
        <checkbox-group @change="onAllCheck">
          <checkbox :checked="allChecked">全选</checkbox>
        </checkbox-group>
      </view>
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{totalPrice}}</text>
      </view>
      <!-- 结算 -->
      <navigator @click="onGoPay" class="go-pay">去结算({{totalNum}})</navigator>
    </view>
  </view>
</template>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
  computed:{
    ...mapState(['cartList']),
    // 选中的总数量
    // 选中的总价格
    ...mapGetters(['totalPrice','totalNum']),
    
    // 被动的全选按钮，当数组中的选项全被选中则全选按钮勾选
    allChecked(){
      // 数组的方法 every！！！
      // 当数组是空数组的时候 every 返回值 true
      return this.cartList.length&&this.cartList.every(item=>item.checked)
    }
  },
  methods: {
    // 按钮选中与取消
    onGoodsCheck(index){
      console.log(index)
      const cartList = this.cartList
      cartList[index].checked = !cartList[index].checked
      this.$store.commit('setCartList',cartList)
    },
    // 数量编辑
    async onNumChange(unit,index){
      const cartList = this.cartList
      // 判断用户是否想要删除元素
      if(unit===-1&&this.cartList[index].nums===1){
        const [err,res] = await uni.showModal({
          title: '提示',
          content: '您确定要删除吗？',
        })
        console.log(res)
        // 判断用户点击 删除还是取消
        if(res.confirm){
          cartList.splice(index,1)
          this.$store.commit('setCartList',cartList)
        }
      }else{
        cartList[index].nums += unit
        this.$store.commit('setCartList',cartList)
      }
    },
    // 全选控制数组的每一个选项
    onAllCheck(){
      const cartList = this.cartList
      cartList.forEach(item=>{
        item.checked = !item.checked
      })
      // 交回新数据给vuex，更新vuex数据
      this.$store.commit('setCartList',cartList)
    },
    onGoPay(){
      if(this.totalNum===0){
        uni.showToast({ title: '您还没选择商品',icon:'none' })
        return
      }
      uni.navigateTo({url: '/pages/pay/pay',})
    }
  }
}
</script>

<style lang="scss">
.cart {
  .cart-list {
    padding: 15rpx;
    .cart-item {
      display: flex;
      .cart-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        checkbox {
        }
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 80%;
        }
      }

      .cart-detail {
        flex: 4;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cart-goods-name {
          font-size: 26rpx;
          color: #666;
        }

        .cart-goods-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goods-price {
            font-size: 26rpx;
            color: #eb4450;
          }

          .goods-num-tool {
            display: flex;

            .num-change {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              border: 1rpx solid #ccc;
              text-align: center;
              line-height: 34rpx;
              font-size: 26rpx;
              color: #666;
            }

            .num-value {
              height: 40rpx;
              margin: 0 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}
.cart-tool {
  border-top: 1rpx solid #ccc;
  padding: 0 20rpx;
  display: flex;
  height: 83rpx;
  align-items: center;
  color: #666;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;

  .all-checkbox {
    width: 144rpx;
    font-size: 26rpx;
    checkbox-group {
      checkbox {
      }
    }
  }

  .all-price {
    flex: 1;
    font-size: 26rpx;
    text {
      color: #eb4450;
    }
  }

  .go-pay {
    padding: 0 20rpx;
    height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>